<template>
	<view class="content t-flex between">
		<view class="item t-flex colum" @click="setval(0)">
			<image :src="model[0]?$str.img(model[0]):'/static/image/18.png'" mode="aspectFill" class="img"></image>
			<view class="c9 mt20">
				身份证人像面
			</view>
			<view class="del" @click.stop="model[0] = ''" v-if="model[0] && !disabled">
				<image src="../../static/icons/29.png" mode="aspectFit" class="icon"></image>
			</view>
		</view>
		<view class="item t-flex colum" @click="setval(1)">
			<image :src="model[1]?$str.img(model[1]):'/static/image/17.png'" mode="aspectFill" class="img"></image>
			<view class="c9 mt20">
				身份证国徽面
			</view>
			<view class="del" @click.stop="model[1] = ''" v-if="model[1] && !disabled">
				<image src="../../static/icons/29.png" mode="aspectFit" class="icon"></image>
			</view>
		</view>
	</view>
	
	
</template>

<script setup lang="ts">
	import { computed } from 'vue';
	import { chooseImg, upload } from '../../lib/ts/util';
	
	let emit = defineEmits(['update:modelValue'])
	
	let props = defineProps({
		modelValue:{
			type:Array,
			default:[]
		},
		options:{
			type:Array,
			default:[]
		},
		disabled:{
			type:Boolean,
			default:false
		}
	})
	
	
	let model = computed({
		get(){
			return props.modelValue
		},
		set(val){
			emit('update:modelValue',val)
		}
	})
	
	
	const setval = (index:number)=>{
		if(props.disabled) return
		chooseImg(1).then(res=>{
			upload(res[0]).then(res=>{
				model.value[index] = res.data.url
			})
		})
	}
	
	
	
</script>

<style scoped lang="scss">
	.content{
		width: 100%;
	}
	.item{
		position: relative;
		.img{
			width: 300rpx;
			height: 182rpx;
		}
		.del{
			padding: 10rpx;
			position: absolute;
			right: 0;
			top: 0;
			.icon{
				width: 40rpx;
				height: 40rpx;
				background-color: #fff;
				border-radius: 50%;
			}
		}
	}
	
	
	
	
</style>